import './index.css';
import './total.less';
import { Layout, Breadcrumb, DatePicker, Form, Input, Select, Table, Pagination, Button } from 'antd';
import React, { useState,useEffect } from 'react';
import billStore from '../../store/billSrc';
import { observer } from 'mobx-react';
import http from '../../utils/http';

const { Column } = Table;
const { Content } = Layout;
function onChange(date, dateString) {
    console.log(date, dateString);
}
// 分页布局
function itemRender(current, type, originalElement) {
    if (type === 'prev') {
        return <a>上一页</a>;
    }
    if (type === 'next') {
        return <a>下一页</a>;
    }
    return originalElement;
}

// -------总------
function Total(props) {
    billStore.setPathName(props.location.pathname);
    // --------弹框-----------------
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        setIsModalVisible(false);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
   
    const [form] = Form.useForm();

    // 一开始列表查询
    const [tableList, setTableList] = useState([]);
    function getList(){
        http({
            url:'/bill/detail/pay'
        }).then(res =>{
            setTableList(res.data);
        })
    }
    useEffect(() => {
        getList();
    }, [])
    // 筛选时间
    function formatTime2(time){
        let time2 = time.toString();
        let arr = time2.split(' ');
        // console.log(arr, arr[2]);
        let mon;
        switch (arr[1]){
            case 'Aug':
                mon = '08';
                break;
            case 'Sep':
                mon = '09';
                break;
        }
        let createTime3 = arr[3]+'-'+mon+'-'+arr[2];
        return createTime3;
    }
    // 模糊查询
    const onFinish = (values) => {
        console.log('Finish:', values);
        http({
            url:'/bill/detail/seePay',
            data:{
                name:values.NAME,
                orderTime:formatTime2(values.orderTime)
            }
        }).then(res => {
            setTableList(res.data);
        })
    };

    // 表格
    // const columns = [
    //     {title: '结算时间',dataIndex: 'name',key: 'name'},
    //     {title: '陪护员',dataIndex: 'name',key: 'name'},
    //     {title: '结算周期',dataIndex: 'name',key: 'name'},
    //     { title: '订单总额（元）', dataIndex: 'address', key: '1' },
    //     { title: '提成', dataIndex: 'address', key: '2' },
    //     { title: '结算金额（元）', dataIndex: 'address', key: '3' },
    //     { title: '订单', dataIndex: 'address', key: '4' },
    //     { title: '收款人', dataIndex: 'address', key: '5' },
    //     { title: '开户行', dataIndex: 'address', key: '5' },
    //     { title: '银行卡', dataIndex: 'address', key: '5' },
    //     {  title="操作",
    //        key="action",
    //        render={(text, record) => (
    //       <Space size="middle">
    //         <a>Invite {record.lastName}</a>
    //         <a>Delete</a>
    //       </Space>
    //     )}}
    // ];



    return <div className="totalCss">
        <p className="breadCss">提成结算</p>
        <Breadcrumb className="breadCss2">
            <Breadcrumb.Item>对账单管理</Breadcrumb.Item>
            <Breadcrumb.Item>提成结算</Breadcrumb.Item>
        </Breadcrumb>
        <Content
            className="dD_Css"
        >
            {/* 筛选行 */}
            <div className="dateRow">
                <>
                    <Form
                        layout="inline"
                        form={form}
                        size="middle"
                        onFinish={onFinish}
                    >
                        <div className="formItemBox">
                            <Form.Item label="时间" name="orderTime">
                                <DatePicker placeholder="请选择日期" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="陪护员" name="NAME">
                                <Input placeholder="请输入陪护员" />
                            </Form.Item>
                        </div>
                        {/* <div className="formItemBox">
                            <Form.Item label="状态">
                                <Select>
                                    <Select.Option value="待结算">待结算</Select.Option>
                                    <Select.Option value="已结算">已结算</Select.Option>
                                </Select>
                            </Form.Item>
                        </div> */}
                        <div className="formItemBox">
                            <Form.Item >
                                <Button type="primary" htmlType="submit">筛选</Button>
                            </Form.Item>
                        </div>
                    </Form>
                </>
            </div>
            {/*  ----------  表格  -------------  */}
            <div className="tableBox">
                <Table
                    // columns={columns}
                    dataSource={tableList}
                    size="middle"
                    className="tableCss"
                    pagination={false}
                    rowKey="key"
                >

                    <Column title="结算时间" dataIndex="orderTime" key="1" />
                    <Column title="陪护员" dataIndex="NAME" key="2" />
            
                    <Column title="订单总额（元）" dataIndex="serviceFee" key="3" />
                    {/* <Column title="提成" dataIndex="address" key="address" /> */}
                    <Column title="结算金额（元）" dataIndex="payment" key="4" />
                    <Column title="订单" dataIndex="orderNum" key="5" />
                    <Column title="收款人" dataIndex="payee" key="6" />
                    <Column title="开户行" dataIndex="bankName" key="7" />
                    <Column title="银行卡号" dataIndex="bankId" key="8" />

                   
                </Table>
            </div>
            {/* 分页 */}
            <div className="pageCss">
                <>
                    <Pagination
                        showSizeChanger
                        showTotal={total => ` ${total}条记录`}
                        total={15}
                        size="small"
                        // showQuickJumper
                        itemRender={itemRender}

                    />
                </>,
            </div>
        </Content>
    </div>
}
export default observer(Total);